<style scoped>
main {
	/* background-image: url("../public/assets/diandu_bj_2_pt@2x.png"); */
	background-size: 100% 100%;
	height: 100%;
	position: relative;
}

.back {
	cursor: pointer;
	left: 2%;
	position: absolute;
	top: 1.5rem;
	width: 2.5rem;
}

.title-middle {
	font-family: FZLTDHK--GBK1, serif;
	color: #222222;

	font-size: 1.8rem;
	/* width: 100%; */
	text-align: center;

	position: absolute;
	left: 50%;
	top: 2.8rem;
	transform: translate(-50%, -50%);
}

.content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.contentImage {
	margin: 0 10%;
	/* max-width: 20%; */
	width: 15rem;
	height: auto;
	cursor: pointer;
}

.contentImage:hover {
	transform: scale(1.1);
}
</style>

<template>
	<main :style="{ backgroundImage: `url(${url})` }">
		<img alt="" class="back" :src="url1" @click="goBack()" />
		<!-- <span class="title-middle">语音评测</span> -->
		<div class="content">
			<img alt="" :src="url2" class="contentImage" @click="goToPath('/vocabulary')" />
			<img alt="" :src="url3" class="contentImage" @click="goToPath('/expression')" />
		</div>
	</main>
</template>

<!-- <script>
export default {
	// 组件内守卫
	beforeRouteEnter: (to, form, next) => {
		next(
			() => {
				if (!localStorage.getItem('isRefreshBook')) {
			localStorage.setItem('isRefreshBook', 1);
			location.reload();
		}
			}
		);

	},
	beforeRouteLeave: (to, form) => {
		const pathList = ['/vocabulary', '/expression']
		if (pathList.indexOf(to.path) == -1) {
			localStorage.removeItem('isRefreshBook');
		}
	},
}
</script> -->

<script setup>
import { useRouter, useRoute } from "vue-router";
import Grade from "../utils/grade.js"

const route = useRoute();
const path = window.gradeId > 61 ? 'middle' : 'primary';

const router = useRouter();

const goBack = () => {
	router.go(-1)
}

function goToPath(url) {
	router.push(url);
}

const url = new URL(`../public/assets/book/${path}/bg.png`, import.meta.url).href;
const url1 = new URL(`../public/assets/book/${path}/back.png`, import.meta.url).href;
const url2 = new URL(`../public/assets/book/${path}/left.png`, import.meta.url).href;
const url3 = new URL(`../public/assets/book/${path}/right.png`, import.meta.url).href;

// const getImageUrl = (name) => {    
//     return new URL(name, import.meta.url).href
// }

// const url =  getImageUrl(`../public/assets/book/${path}/bg.png`);
// const url1 = getImageUrl(`../public/assets/book/${path}/back.png`);
// const url2 = getImageUrl(`../public/assets/book/${path}/left.png`);
// const url3 = getImageUrl(`../public/assets/book/${path}/right.png`);

console.log(url);



</script>

